<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <div>
        <!-- 查询条件 -->
        <el-form :model="searchForm" label-width="100px" class="search-form">
          <el-row>
            <el-col :span="8">
              <el-form-item label="人员编号">
                <person-rpc ref="personRpc" @personRpcCallBack="personRpcCallBack" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="searchForm.aac003" placeholder="请输入姓名" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="text-right" style="float: right">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="经办时间">-->
            <!--                <el-date-picker-->
            <!--                  v-model="searchForm.startDate"-->
            <!--                  type="daterange"-->
            <!--                  start-placeholder="开始日期"-->
            <!--                  end-placeholder="结束日期"-->
            <!--                  :picker-options="pickerOptions"-->
            <!--                  style="width: 100%"-->
            <!--                ></el-date-picker>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
        </el-form>
      </div>
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="身份证号码" prop="aac002">
            <el-input v-model="form.aac002" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="姓名" prop="aac003">
            <el-input v-model="form.aac003" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="性别" prop="aac004">
            <el-select v-model="form.aac004" placeholder="请选择" style="width: 370px">
              <el-option v-for="item in dict.aac004" :key="item.id" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="民族" prop="aac005">
            <el-input v-model="form.aac005" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="出生日期" prop="aac006">
            <el-date-picker v-model="form.aac006" format="yyyy-MM-dd" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="档案出生日期" prop="aac327">
            <el-date-picker v-model="form.aac327" format="yyyy-MM-dd" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="证件类型" prop="aac058">
            <el-select v-model="form.aac058" placeholder="请选择" style="width: 370px">
              <el-option v-for="item in dict.aac058" :key="item.id" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="参工日期">
            <el-date-picker v-model="form.aac007" format="yyyy-MM-dd" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.aae013" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler" @row-dblclick="handleRowDblClick">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="aac001" label="个人编号" />
        <el-table-column prop="aac002" label="身份证号码" />
        <el-table-column prop="aac003" label="姓名" />
        <el-table-column prop="aac004" label="性别" :formatter="formatter" />
        <el-table-column prop="aac005" label="民族" />
        <el-table-column prop="aac006" label="出生日期" :formatter="formatDate" />
        <el-table-column prop="aac327" label="档案出生日期" :formatter="formatDate" />
        <el-table-column prop="aac058" label="证件类型" :formatter="formatter" />
        <el-table-column prop="aac007" label="参工日期" :formatter="formatDate" />
        <el-table-column prop="aae013" label="备注" />
        <el-table-column v-if="checkPer(['admin','basicAc01:edit','basicAc01:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />

      <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogVisible" title="人员参保信息" :style="{ zIndex: 1000 }">
        <!--      // 注入·参保信息-->
        <ac02 ref="ac02ref" :permission="permission" :aac001="aac001" @queryCallBack="queryCallBack" />
        <el-button @click="dialogVisible = false">关闭</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import crudBasicAc01 from '@/views/ynsb_comm/ac01/basicAc01'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import ac02 from '../ac02/index'
import PersonRpc from '@/views/ynsb_comm/comm/module/personRpc'

const defaultForm = { aac001: null, aac002: null, aac003: null, aac004: null, aac005: null, aac006: null, aac327: null, aac058: null, aac007: null, aae013: null }
export default {
  name: 'BasicAc01',
  components: { PersonRpc, pagination, crudOperation, udOperation, ac02 },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '人员基础信息', url: 'api/basicAc01', idField: 'aac001', sort: 'aac001,desc', crudMethod: { ...crudBasicAc01 }})
  },
  // 数据字典
  dicts: ['aac004', 'aac058'],
  data() {
    return {
      searchForm: {
        aac001: '', // 人员编号
        aac003: '' // 姓名
      },
      permission: {
        add: ['admin', 'basicAc01:add'],
        edit: ['admin', 'basicAc01:edit'],
        del: ['admin', 'basicAc01:del']
      },
      rules: {
        aac002: [
          { required: true, message: '身份证号码不能为空', trigger: 'blur' }
        ],
        aac003: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        aac004: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        aac005: [
          { required: true, message: '民族不能为空', trigger: 'blur' }
        ],
        aac006: [
          { required: true, message: '出生日期不能为空', trigger: 'blur' }
        ],
        aac327: [
          { required: true, message: '档案出生日期不能为空', trigger: 'blur' }
        ],
        aac058: [
          { required: true, message: '证件类型不能为空', trigger: 'blur' }
        ]
      },
      dialogVisible: false, // 控制弹窗的显示与隐藏
      selectedRow: null, // 存储被双击的行数据
      aac001: '' // 个人编号
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    formatter(row, column, cellValue) {
      // 根据 aae140 的值进行转码
      const key = column.property
      const data = this.dict[key]
      const dataList = data.filter(item => item.value === cellValue)
      console.log(dataList, 'data')
      if (dataList !== null && dataList !== [] && dataList !== undefined && dataList.length > 0) {
        return dataList[0].label
      } else {
        return cellValue
      }
    },
    personRpcCallBack(item) {
      this.form.aac001 = item.aac001
      this.searchForm = {
        aac001: item.aac001,
        aac003: item.aac003
      }
    },
    search() {
      // 假设查询的数据
      crudBasicAc01.getAc01({ ...this.searchForm }).then(res => {
        console.log(res, 'res')
        this.crud.data = res.content
      })
    },
    reset() {
      this.$refs.personRpc.restAac001('')
      this.searchForm = {
        aac001: '',
        aac003: ''
      }
      this.tableData = [] // 清空表格数据
    },
    queryCallBack() {
      this.dialogVisible = false // 显示弹窗
    },
    // 双击行触发的事件
    handleRowDblClick(row) {
      console.log(row, 'row')
      this.aac001 = row.aac001
      this.selectedRow = row // 获取双击的行数据
      this.dialogVisible = true // 显示弹窗
      setTimeout(() => {
        this.$refs.ac02ref.getAc02s()
      }, 500) // 延迟1秒后显示弹窗
    },
    // 日期格式转换
    formatDate(row, column, cellValue) {
      // 格式化日期为 YYYY-MM-DD
      if (cellValue !== null && cellValue !== undefined) {
        const date = new Date(cellValue)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        return `${year}-${month}-${day}`
      } else {
        return '--'
      }
    }
  }
}
</script>

<style scoped>

</style>
